<template>
	<view class="center">
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view class="profily_header">
						<image class="avator" src="../../static/toux.jpg"></image>
					</view>
					<text>{{userinfo.name ? userinfo.name : "未设置用户名"}}</text>										
				</view>
			</view>
			<view class="center_menu">
				<view class="menu_item" @tap="toPage('/pages/user/userInfo')">
					<image src="../../static/my.png" mode="aspectFill"></image>
					<text>用户资料</text>
				</view>
				<view class="menu_item" @tap="toPage('/pages/user/aboutUs')">
					<image src="../../static/info.png" mode="aspectFill"></image>
					<text>关于我们</text>
				</view>
			</view>
		</view>
		<view class="login-btn">
			<u-button type="primary" shape="circle" @click="logout">退出登录</u-button>
		</view>
	</view>
</template>
<script>
import api from '@/api/api.js'
export default {
	data() {
		return {
			userinfo: "",
			avatar: require("../../static/toux.jpg")
		};
	},
	onLoad() {},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		async getUserInfo () {
			const openid = uni.getStorageSync('openid');
			if (!openid) {
				uni.navigateTo({
					url: '/pages/login/index'
				});
				return
			}
			const res = await api.getUserByOpenId({ openId: openid })
			this.userinfo = res.userinfo;
			// if (!res.userinfo.phonenum) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '请完善个人信息',
			// 		showCancel: false,
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				uni.navigateTo({
			// 					url: '/pages/login/register'
			// 				});
			// 			} else if (res.cancel) {
			// 				//console.log('用户点击取消')
			// 			}
			// 		}
			// 	})
			// }
		},
		// 用户点击列表项
		toPage (url) {
			uni.navigateTo({
				url: url
			})
		},
		// 注销
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录？',
				success: function(res) {
					if (res.confirm) {
						uni.removeStorageSync('openid');
						uni.removeStorageSync('session_key');
						uni.navigateTo({
							url: '/pages/login/index?source=relogin'
						});
					} else if (res.cancel) {
						//console.log('用户点击取消')
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 8px;
		height: 28%;
		background-size: cover;
		overflow: hidden;
	}

	.center {
		position: relative;
		height: 100vh;

		.center_box_bg {
			background: #F9F9F9;
			position: relative;
			overflow: hidden;

			.profily {
				position: relative;
				margin: 20upx;
				padding: 35upx;
				background: linear-gradient(#86b5f4, #4790ef);
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}

	.base {
		display: flex;
		align-items: center;
		padding-bottom: 35upx;
		position: relative;
		z-index: 1;

		.profily_header {
			height: 120upx;
			width: 120upx;
			background-size: 100%;
			.avator {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-size: cover;
			}
		}

		text {
			margin-left: 20px;
			font-size: 30upx;
      color: #fff;
		}
	}

	.center_menu {
		width: 100%;
		display: inline-block;

		.menu_item {
			font-size: 28upx;
			letter-spacing: 1px;
			padding: 14px 5%;
			background: #FEFEFE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 1px solid #EFEFEF;

			&:hover {
				background: #F6F6F6 !important;
			}

			&::after {
				content: '';
				width: 30upx;
				height: 30upx;
				position: absolute;
				right: 5%;
				background: url('../../static/to.png') no-repeat;
				background-size: 100%;
			}

			text:nth-of-type(1) {
				margin-left: 10px;
			}

			image {
				width: 40upx;
				height: 40upx;
			}
		}
	}

	.login-btn {
		position: absolute;
		width: 400upx;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 100upx;
	}
</style>
